<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Widget :: Suggestions</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/ui/1.8.0/jquery-ui.min.js"></script>
		<script type="text/javascript" src="widget/suggestions-widget2.js"></script>
		<link rel="stylesheet" type="text/css" href="style/suggestions-widget-style2.css" />
		<style type="text/css">
			.marginTB5px {
				margin: 5px 0px;
			}
			.marginL20px {
				margin-left: 500px;
			}
			.x-inline-block {
				display: inline-block;
				zoom: 1;
				*display: inline;
				 _height: 30px;
			}
			.width400px {
				width: 400px;
			}
			.height30px {
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="marginTB5px x-inline-block">
			Default behaviour
			<div id="x-default" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the trigger character to #
			<div id="x-triggerOn" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the drop down template
			<div id="x-itemTemplate" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the identifier property from 'id' to 'email'
			<div id="x-identifierProperty" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the value displayed on item selection to 'email'
			<div id="x-valueProperty" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the height toggle to 50 characters from 75 characters
			<div id="x-increaseHeightAfter" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the number of items in drop down to 5 from 10
			<div id="x-itemsPerPage" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed widget to take 200 pixel fixed width for drop down
			<div id="x-dropdownWidth" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed widget to show a close button for drop down
			<div id="x-closeBtnRequired" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the widget to have pagination footer functionality
			<div id="x-footerRequired" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the widget to turn off next and previous key navigation
			<div id="x-next-prev" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Changed the widget to switch off up down key navigation
			<div id="x-up-down-nav" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Using the default event
			<div id="x-defaultEvent" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
		<br/>
		<div class="marginTB5px x-inline-block">
			Using the custom event
			<div id="x-customEvent" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
	</body>
	<script type="text/javascript">
		$( document ).ready(function() {
			$( '#x-default' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>"
			});
			$( '#x-triggerOn' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				triggerOn: "#"
			});
			$( '#x-itemTemplate' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:name}\"><div>{@:name}</div><div>{@:email}</div></div>"
			});
			$( '#x-identifierProperty' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				identifierProperty: "email"
			});
			$( '#x-valueProperty' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "email",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>"
			});
			$( '#x-increaseHeightAfter' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				autoHeight: true,
				increaseHeightAfter: 50,
				dropdownWidth: 200
			});
			$( '#x-itemsPerPage' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				itemsPerPage: 5
			});
			$( '#x-dropdownWidth' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				dropdownWidth: 200,
				closeBtnRequired: true
			});
			$( '#x-closeBtnRequired' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				closeBtnRequired: true
			});
			$( '#x-footerRequired' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				footerRequired: true
			});
			$( '#x-next-prev' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				footerRequired: true,
				keyNavigation: {
					next_prev: false
				}
			});
			$( '#x-up-down-nav' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				keyNavigation: {
					up_down: false
				}
			});
			$( '#x-defaultEvent' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>"
			}).bind( "suggestionsitemselected", function( event, data ) {
				if(window.console) {
					console.log("callback - suggestionsitemselected");
					console.log(event);
					console.log(data);
				}
		    });
			$( '#x-customEvent' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				customEventPrefix: "sdd"
			}).bind( "sdditemselected", function( event, data ) {
				if(window.console) {
					console.log("callback - sdditemselected");
					console.log(event);
					console.log(data);
				}
		    });
		});
	</script>
</html>
